<template>
    <div>
        <el-form :inline="true" :model="searchForm">
            <el-form-item label="手机号：">
                <el-input v-model.trim="searchForm.phone" clearable></el-input>
            </el-form-item>
            <el-form-item label="昵称：">
                <el-input v-model.trim="searchForm.nickName" placeholder="请输入昵称" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getUserHandle">搜索</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="showAddUser">新增</el-button>
            </el-form-item>
        </el-form>

        <el-table :data="tbpg.tableData" border height="622">
            <el-table-column type="index" label="序号"></el-table-column>          
            <el-table-column prop="nickName" label="昵称" width="250"></el-table-column>
            <el-table-column prop="agentPathName" label="层级关系"></el-table-column>
            <el-table-column prop="accountName" label="账号" width="200"></el-table-column>
            <el-table-column prop="roleName" label="角色" width="120"></el-table-column>
            <el-table-column prop="phone" label="手机号" width="120"></el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="150"></el-table-column>
            <el-table-column prop="stateName" label="状态" sortable width="100"></el-table-column>
            <el-table-column label="操作" width="150">
                <template slot-scope="scope">
                    <el-button type="text" @click="showEditUser(scope.row)">编辑</el-button>
                    <el-button type="text" @click="resetPwdHandle(scope.row.id)">重置密码</el-button>
                    <el-button type="text" @click="changeStateHandle(scope.row.id)">{{ showbtnText(scope.row.state) }}</el-button>
                </template>    
            </el-table-column>>
        </el-table>
        
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="tbpg.currentPage"
            :page-sizes="[15, 50, 100, 500]"
            :page-size="tbpg.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tbpg.total">
        </el-pagination> 
        <el-dialog :title="title" :visible.sync="addUserVisible" width="600px" @close="cancel" :close-on-click-modal="false">
            <el-form ref="addOrEditUserForm" :model="addOrEditUserForm" :rules="addOrEditUserRoles" label-width="100px">
                <el-form-item label="昵称：" prop="nickName">
                    <el-input v-model.trim="addOrEditUserForm.nickName" clearable></el-input>
                </el-form-item>
                <el-form-item label="账号：" prop="accountName">
                    <el-input v-model.trim="addOrEditUserForm.accountName" clearable></el-input>
                </el-form-item>
                <el-form-item label="手机号：" prop="phone">
                    <el-input v-model.trim="addOrEditUserForm.phone" maxlength="11" clearable></el-input>
                </el-form-item>
                <el-form-item  v-if="addUserFlag" label="登录密码：" prop="pwd">
                    <el-input v-model.trim="addOrEditUserForm.pwd" show-password clearable></el-input>
                </el-form-item>
                <el-form-item label="用户角色：" prop="roleId">
                    <el-checkbox-group v-model="addOrEditUserForm.roleId">
                        <el-checkbox v-for="(role, index) in roleList" :key="index" :label="role.id">{{role.name}}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="addOrEditUserHandle">确 定</el-button>
            </div> 
        </el-dialog> 
    </div>
</template>
<script>
import {addUser, getUserList, resetUserPwd, changeState, getOneUserInfo, editUserInfo, getRoleList} from '@/api/user.js'
import common from '@/utils/common.js'
export default {
    data(){
        return {
            searchForm: {
                phone: '',
                nickName: ''
            },
            tbpg: {
                tableData: [],
                currentPage: 1,
                pageSize: 15,
                total: 0
            },
            addOrEditUserForm: {
                nickName: '',
                accountName: '',
                phone: '',
                pwd: '',                
                roleId: []
            },
            roleList: [],
            title: '新增用户',
            addUserFlag: true,
            userId: null,
            addUserVisible: false,
            addOrEditUserRoles: {
                nickName: [{required: true, message: '请输入昵称', trigger: 'blur'}],
                accountName: [{required: true, validator: this.checkAccount, trigger: 'blur'}],
                phone: [{required: true, validator: this.checkPhone, trigger: 'blur'}],
                pwd: [{required: true, validator: this.checkPassword, trigger: 'blur'}],
                roleId: [{required: true, message: '请选择角色', trigger: 'change'}]
            }
        }
    },
    methods: {
        cancel(){
            this.addUserVisible = false;
            this.$refs.addOrEditUserForm.resetFields();
        },
        showbtnText(state){
            return common.showTxtByState(state, {2: '启用', 1: '禁用'})
        },
        getUserHandle($event){
            common.resetCurrentPage(this, $event, 'tbpg');
            var data = common.getRequestParams(this, 'tbpg', this.searchForm);
            getUserList(data).then(res => {
                common.listCallback(this, res, 'tbpg');
            })
        },
        showAddUser(){
            this.title = '新增用户';
            this.addUserVisible = true;
            this.addUserFlag = true;
            getRoleList({}).then(res => {
                var resultList = res.data.data;
                this.roleList = resultList
            })
        },
        addOrEditUserHandle(){
            this.$refs.addOrEditUserForm.validate(valid => {
                if(valid){
                    var data = JSON.parse(JSON.stringify(this.addOrEditUserForm));
                    data.roleId = data.roleId.join('_');       
                    if(this.addUserFlag){
                        addUser(data).then(res => callback(res))
                    }else{
                        data.id = this.userId;
                        editUserInfo(data).then(res => callback(res))                        
                    }
                }

                var _this = this;
                function callback(res){
                    if(res.data.code == 200){
                        _this.searchForm.phone = '';
                        _this.getUserHandle();
                        _this.addUserVisible = false;
                        
                    }else{
                        _this.$message.error(res.data.message)
                    }                     
                }
            })            
        },
        showEditUser(row){
            this.title = "修改用户信息";
            this.addUserVisible = true;
            this.addOrEditUserForm.nickName = row.nickName;
            this.addOrEditUserForm.accountName = row.accountName;
            this.addOrEditUserForm.phone = row.phone;
            this.addUserFlag = false;
            this.userId = row.id;
            getRoleList({'id': row.id}).then(res => {
                var resultList = res.data.data;
                this.roleList = resultList
                resultList.forEach((value, index) => {
                    if(value['isCheck'] == 1){
                        this.addOrEditUserForm.roleId.push(value['id']); 
                    }
                }); 
            })           
        },       
        changeStateHandle(id){            
            changeState({'id': id}).then(res => {
                if(res.data.code == 200){
                    this.$message.success('操作成功！')
                    this.getUserHandle();
                }else{
                    this.$message.error(res.data.message);
                }
            })
        },
        resetPwdHandle(id){
            resetUserPwd({'id': id}).then(res => {
                this.$message.success(res.data.message)
            })
        },
        handleSizeChange(val){
            this.tbpg.pageSize = val;
            this.getUserHandle();
        },
        handleCurrentChange(val){
            this.tbpg.currentPage = val
            this.getUserHandle();
        }
    },
    created(){
        this.getUserHandle();
    }
}
</script>
<style lang="less" scoped>

</style>

